<template>
  <h1>订单页面</h1>
  <div class="top">
    <el-button type="">分类列表</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%" class="liebiao" stripe v-loading="loading">
    <el-table-column prop="userid" label="订单号" width="160" />
    
    <el-table-column label="图片" width="160">
      <template #default="scope">
        <img class="img" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column  label="订单状态" width="140" prop="status">
    
      </el-table-column>

    <el-table-column prop="proname" label="商品" width="200" />
    <el-table-column prop="discount" label="折扣" width="140" />
    <el-table-column prop="time" label="订单电话" width="160" />
    <el-table-column prop="originprice" label="价钱" width="140" />
  </el-table>
  <el-pagination
      v-model:page-size="num"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  
    
  
 
</template>

<script setup lang="ts">
import service from '../../../utlis/service';
import{reactive,ref} from 'vue'
import{newData} from '../../../utlis/fen'


interface Iorder {
  banners: string;
  category: string;
  proname: string;
  originprice: number;
  isrecommend: number;
  img1: string;
  isseckill: number;
  stock: number;
  desc: string;
  sales: number;
}
const background = ref(false)
const currentPage4 = ref(4)
const loading = ref(true)
let tableData=reactive<Iorder[]>([])
  //封装分页
const resData = reactive<Iorder[]>([])
const num = 40
const total = ref(0);
const handleCurrentChange = (e: any) => {
  resData.length = 0
  resData.push(...newData(tableData, e, num))
  console.log(111);
  console.log( resData.push(...newData(tableData, e, num)));
  
  
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
//获取管理人员列表
const getList = () => {
  service({
    url: "/order/list",
  }).then((res: any) => {
    if (res.data.code === '200') {
      tableData.length = 0;
      tableData.push(...res.data.data);
      
      
      loading.value = false
      total.value = res.data.data.length;
    }
  }).then(() => {
    // newData(tableData)
    resData.length = 0
    resData.push(...newData(tableData, 1, num))
    

  })
};

getList();





</script>

<style scoped>
.img{
  width: 160px;
  height: 160px;
}
.el-pagination{
 margin-left: 250px;
}

</style>